<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Plotting charts from data in HTML Tables </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>If you've your data in boring HTML tables, you can quickly and easily spice them up with charts, at just the click of few buttons. Here, we'll show you how. The XML Generator Utility allows you to copy data from HTML tables and convert it into XML too. Let's quickly see an example.</p>
    <p>We'll again get back to our Monthly sales summary example. Let's consider that we've this display present as an HTML table and we now need to convert it to a chart. </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_Table_1.gif" width="407" height="315" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">Shown above is out table in HTML format. To convert this data into XML, you'll first need to copy paste this data into XML Generator Utility. Copy only the required data rows (and not the header) as under: </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_Table_2.gif" width="408" height="311" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">Now, we need to paste this data in our XML Generator Utility. Launch the XML Generator utility and select the second option &quot;<span class="codeInline">I want to copy/paste my data from spreadsheet / table</span>&quot;. </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_Excel_4.jpg" width="478" height="179" class="imageBorder" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">In the text area that you now get, paste the data that's in your clipboard. It should look as under: </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_Table_3.jpg" width="600" height="451" /></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>Now, select <span class="codeInline">Space</span> as the delimiter, as the data is now separated using space instead of Tabs. </p>
    <p>To know what the delimiter is, you can first paste the data in some text editor (like Notepad, Textpad etc.) and then see the character separating two data items on the same row. You can easily recognize the delimiter character from the text editor. </p>
    <p>Also, if you've trailing spaces at the end of each data row, you might have to manually remove them. </p>
    <p>Now, you've two options to convert it into XML:</p>
    <ol>
      <li>You can directly convert this data into XML without making any changes to it.</li>
      <li>Or, you can edit this data in the grid and then convert it to XML.</li>
    </ol>
    <p>To choose option 1, click on &quot;<span class="codeInline">Convert to XML</span>&quot; button. You'll instantly get the XML as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_FC_4.jpg" width="600" height="451" /></td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>You can now configure the chart properties or generate HTML from here as explained in earlier sections. </p>
    <p>Going back to previous step, if you had wished to edit the data before conversion, you can click on &quot;<span class="codeInline">Edit and Convert</span>&quot; button. This lets you edit your data in a grid as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/GUI_Table_4.jpg" width="600" height="451" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">After editing your data, you can now click on &quot;<span class="codeInline">Convert to XML</span>&quot; button to generate the XML and finally chart. </td>
  </tr>
</table>
</body>
</html>
